<template>
	<view class="container" v-if="product!=null && product.image!=null">
		<view class="product-header">
			<image class="product-image" :src="product.image" mode="aspectFit"></image>
			<view class="product-info">
				<text class="product-name">{{ product.name }}</text>
				<text class="product-subtitle">{{ product.subtitle }}</text>
			</view>
		</view>
		<view class="exchange-button" @click="toSubmitOrder">
			<button class="exchange-btn">{{ product.exchangeText }}</button>
		</view>
		<view class="product-details">
			<text class="detail-title">产品详情</text>
			<view class="detail-content">
				<text class="detail-item">名称：{{ product.name }}</text>
				<text class="detail-item">品牌：{{ product.brand }}</text>
				<text class="detail-item">规格：{{ product.specification }}</text>
				<text class="detail-item">货号：{{ product.number }}</text>
				<text class="detail-item">特点：{{ product.feature }}</text>
			</view>
		</view>
		<view class="exchange-info">
			<text class="info-title">兑换说明</text>
			<view class="info-content">
				<text class="info-item">
					1. 积分只能在奥维生物小程序兑换，兑换后不可退回。兑换说明可在<text class="gold-text">"积分商城——我的订单"</text>里查询。
				</text>
				<text class="info-item">
					2.兑换商品需遵守《积分规则》，可在积分商城中查看。
				</text>
			</view>
		</view>
		<view class="exchange-info mt-15">
			<text class="info-title">商品图片</text>
			<view class="info-content">
				<image style="height: 349px ;width: 100%;" v-for="(image, index) in images" :key="index" :src="image"
					mode="aspectFit" alt="产品图片"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		useStore
	} from '@/store/counter.js'
	export default {
		data() {

			return {
				product: null,
				images: null

			};
		},
		onLoad() {
			const useStoreObj = useStore();
			// 从pinia获取存储的商品对象
			let shangPin = useStoreObj.shangPinObj.value;
			console.log(shangPin, 123);
			if(shangPin!=null && shangPin.id!=null){
				this.product = {
					image: shangPin.image, // 替换为实际的图片路径
					name: shangPin.name,
					// subtitle: '仅限到者自意，兑后积分不退',
					brand: shangPin.pinPai,
					specification: shangPin.guiGe,
					number: shangPin.huoHao,
					feature: shangPin.teDian,
					exchangeText: shangPin.jiFen+'积分兑换' // 动态读取的兑换按钮文字
				};
				if(shangPin.shangPinTu!=null){
					this.images = shangPin.shangPinTu.split(",");
				}
				
			}else{
				this.product = {
					image: 'https://aw2025ht.kangye.xyz/api/profile/upload/srYmbYTJbylp.png', // 替换为实际的图片路径
					name: '立美丝凡士林保湿霜干皮润肤身体乳',
					subtitle: '仅限到者自意，兑后积分不退',
					brand: '奥维生物',
					specification: '250g',
					number: 'AW123456',
					feature: '保湿润肤',
					exchangeText: '199积分兑换' // 动态读取的兑换按钮文字
				};
				this.images = [
					'https://aw2025ht.kangye.xyz/api/profile/upload/srYmbYTJbylp.png', // 替换为实际的图片路径
					'https://aw2025ht.kangye.xyz/api/profile/upload/hukWEp8fSV1k.png' // 更多图片路径...
				];
			}

			// const storedProduct = uni.getStorageSync('product');
			// const storedImages = uni.getStorageSync('images');

			// if (storedProduct && storedImages) {
			// 	this.product = storedProduct;
			// 	this.images = storedImages;
			// } else {
			// 	this.product = {
			// 		image: '/static/image/sku2.png', // 替换为实际的图片路径
			// 		name: '立美丝凡士林保湿霜干皮润肤身体乳',
			// 		subtitle: '仅限到者自意，兑后积分不退',
			// 		brand: '奥维生物',
			// 		specification: '250g',
			// 		number: 'AW123456',
			// 		feature: '保湿润肤',
			// 		exchangeText: '199积分兑换' // 动态读取的兑换按钮文字
			// 	};
			// 	this.images = [
			// 		'/static/image/sku2.png', // 替换为实际的图片路径
			// 		'/static/image/sku1.png' // 更多图片路径...
			// 	];
			// }
		},
		methods: {
			toSubmitOrder() {
				console.log('跳转提交订单');
				uni.navigateTo({
					url: '/package/pages/submitOrder/submitOrder'
				});
			}
		},
		// 9999999999999999
	};
</script>

<style>
	.container {
		padding: 16px;
		background-color: #f0f0f0;
	}

	.product-header {
		display: flex;
		align-items: center;
		background-color: #ffffff;
		padding: 15px;
		border-radius: 8px;
		margin-bottom: 10px;
	}

	.product-image {
		width: 100px;
		height: 100px;
		margin-right: 15px;
	}

	.product-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.product-name {
		font-size: 16px;
		font-weight: bold;
		letter-spacing: 1px;
		margin-bottom: 30px;
	}

	.product-subtitle {
		font-size: 12px;
		color: #888;
	}

	.exchange-button {
		margin-bottom: 15px;
	}

	.exchange-btn {
		background-color: #f26b00;
		color: white;
		padding: 2px 16px;
		text-align: center;
		border-radius: 5px;
	}

	.product-details {
		background-color: white;
		padding: 15px;
		border-radius: 8px;
		margin-bottom: 15px;
	}

	.detail-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.detail-content {
		margin-bottom: 15px;
	}

	.detail-item {
		font-size: 14px;
		color: #888;
		display: block;
		margin-bottom: 10px;
	}

	.exchange-info {
		background-color: white;
		padding: 15px;
		border-radius: 8px;
	}

	.info-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.info-content {
		margin-bottom: 15px;
	}

	.info-item {
		font-size: 14px;
		color: black;
		display: block;
		margin-bottom: 10px;
		letter-spacing: 1px;
	}

	.gold-text {
		color: gold;
		/* 设置字体颜色为金色 */
	}

	.mt-15 {
		margin-top: 15px;
	}
</style>